<template>
	<view class="benifits-popup" v-show="illustrate">
		<scroll-view class="scroll-con" :scroll-y="true">
			<view class="benifits-title">等级说明</view>
			<view class="benefits-item">
				<view class="title">权益明细</view>
				<view class="content">
					<view class="equity-item" v-for="(item,index) in illustrate.equity" :key="index">{{index+1}}. {{item}}</view>
				</view>
			</view>
			<view class="benefits-item">
				<view class="title">等级说明</view>
				<view class="content">
					<jyf-parser :html="illustrate.explain"></jyf-parser>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	/**
	 * 会员等级说明
	 * 
	 */
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	export default {
		components:{
			jyfParser
		},
		name: 'stMemberLevelIllustrate',
		props: {
			illustrate:{
				type:Object,
				default(){
					return {}
				}
			},
		},
		data() {
			return {
				
			};
		},
		methods: {
			closePopup(){
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss">
	.benifits-popup{
		background-color: $uni-bg-color;
		font-size: $uni-font-size-sm;
		border-radius: 30rpx 30rpx 0 0;
		.scroll-con{
			max-height: 700rpx;
			min-height: 100rpx;
			// overflow-y: auto;
		}
		.benifits-title{
			@extend .ellipse;
			position: relative;
			height: 120rpx;
			padding: 0 3em 0 24rpx;
			line-height: 120rpx;
			font-size: $uni-font-size-lg;
			font-weight: bold;
			.iconfont{
				position: absolute;
				right: 32rpx;
				top: 0;
				color: $uni-text-color-grey;
			}
		}
		.benefits-item{
			padding: 0 24rpx;
			margin-bottom: 30rpx;
			.title{
				font-size: $uni-font-size-base;
				font-weight: bold;
				margin-bottom: 6rpx;
			}
			.content{
				line-height: 2;
				color: $uni-text-color;
				font-size: $uni-font-size-sm;
				.equity-item{}
			}
			
		}

	}
</style>
